<template>
    <div class="team-content">
        <div class="team-header">
            <h4>代理收益比例</h4>
            <el-button @click="handleBack">
                返回
            </el-button>
        </div>
       <div class="team-table">
            <Table
                :data="[agentInfo]"
                :columns="_columns"
            />
       </div>
    </div>
</template>

<script>
import Table from '@/components/Table'
import {
	TableColumns
} from '@/components/TableContainer'

export default {
	name: 'OwnPointList',
	components: {
		Table
	},
    props: {
        agentInfo: {
            type: Object,
            default: {}
        },
        commissionsShow: {
            type: Function,
            default: () => {}
        },
        columns: {
			type: Array,
			 default: () => ([])
		}
    },
    data() {
        return {
            data: []
        }
    },
    computed: {
        _columns() {
            return this.columns
            .filter(({ prop }) => {
                return prop.indexOf('Rebate') === -1 && prop !== 'actions'
            }).map((col) => {
                const _col = {...col}
                if (_col.prop.indexOf('Commission') > -1) {
                    _col.isShow = true
                }

                if (_col.prop === 'userName') {
                    _col.header = () => '代理账号'
                } 
                if(_col.prop === 'proxyLevel') {
                    _col.isShow = true
                }
                if (col.prop === 'index') {
                    _col.isShow = false
                }
                return _col
            })
            .concat(
                TableColumns.actions({
					minWidth: 110,
					fixed: 'right',
					btns: [
						{
							text: '失效记录',
							onClick: ({ row }) => {
								this.handleCheckExpiredLogs(row)
							}
						}
					]
				})
            )
        }
    },
    watch: {
        // agentInfo: {
        //     immediate: true,
		// 	deep: true,
        //     handler(val) {
        //         this.loadData()
		// 	}
        // }
	},
    created() {
	},
    methods: {
        handleBack() {
            this.$emit('back')
        },
        handleCheckExpiredLogs(row) {
            this.$emit('expiredLogs', row)
        }
    }
}
</script>
<style scoped lang="scss">
    .team-header{
        display: flex;
        margin-bottom: 10px;
        align-items: flex-end;
        h4 {
            font-weight: 400;
            font-size: 16px;
            margin: 0;
            flex: 1;
        }
    }
.team-table{
    margin-bottom:  20px;
    width: auto;
}

.header{
	position: relative;

	.el-icon-question{
		position: absolute;
		font-size: 12px;
		top: 25px;
		right: 5px;
		cursor: pointer;
		&:after{
			font-size: 17px;
		}
	}
}
</style>
